<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>邀请招标评审</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="onFormSubmit">保存</el-button>
                </div>
            </div>
            <table class="custom-table" style="margin-bottom:10px;">
                <tr><td class="tr-title">项目名称</td><td>{{row.name}}</td></tr>
            </table>
            <el-form size="small">
                <el-table :data="tableDataSupplier" style="width: 100%;" stripe>
                    <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
                    <el-table-column prop="quoteAmount" label="报价"></el-table-column>
                    <el-table-column prop="score1" label="履约能力" width="120">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.score1" v-on:input ="function(val){return inputTotal(val,scope.row)}" />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="score2" label="价格" width="150">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.score2" v-on:input ="function(val){return inputTotal(val,scope.row)}"/>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="score3" label="资质" width="150">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.score3" v-on:input ="function(val){return inputTotal(val,scope.row)}"/>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="scoreTotal" label="总分" width="150"></el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="supplierPrice(scope.row)">填写报价</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <table class="custom-table" style="margin-top:10px;">
                <tr><td class="tr-title">评分方法</td>
                    <td><el-input type="textarea" v-model="scoreExplain"></el-input></td>
                </tr>
            </table>
        </el-card>

        <el-dialog title="填写报价" :visible.sync="visible" width="1200px" append-to-body :close-on-click-modal="false">
                <el-table :data="tableDataMaterial" style="width: 100%;" stripe>
                    <el-table-column prop="name" label="劳务名称" width="180"></el-table-column>
                    <el-table-column prop="purchasedNum" label="采购数量" width="90"></el-table-column>
                    <el-table-column prop="unitPrice" label="单价">
                        <template slot-scope="scope">
                                <el-input v-model="scope.row.unitPrice" v-on:input ="function(val){return inputPrice(val,scope.row)}"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalPrice" label="小计">
                        <template slot-scope="scope">
                                <el-input v-model="scope.row.totalPrice"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remarks" label="备注" width="350">
                        <template slot-scope="scope">
                            <el-popover
                                placement="top"
                                width="200"
                                trigger="click"
                                :content="scope.row.remarks">
                                <el-button type="text" slot="reference">{{scope.row.remarks | ellipsis}}</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            <table class="custom-table" style="margin-top:10px;">
                <tr><td class="tr-title">报价合计</td>
                    <td><el-input  v-model="quoteAmount"></el-input></td>
                </tr>
            </table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="supplierOfferSubmit">保存</el-button>
              </div>
        </el-dialog>

     

    </div>
</template>

<script>
    import { bidPurchaseInvitationSupplierEnroll,bidPurchaseInquiryInvitationEnrollDetails } from "@/api/labour_purchase_api"
    export default {
        props: ['row'],
        data() {
            return {
                scoreExplain:"",//评分方法
                quoteAmount:"",//合计报价
                tableDataSupplier:[],//供应商列表
                tableDataMaterial:[],//物资列表
                supplierId:'',//供应商id
                visible:false,//弹出框
            };
        },
        filters: {
            ellipsis (value) {
                if (!value) return ''
                if (value.length > 12) {
                    return value.slice(0,12) + '...'
                }
                return value
            }
        },
        mounted(){
            this.clear();
            this.getSupplierList();//获取供应商列表
        },
        methods: { 
            async getSupplierList(){
                const {code,data} = await bidPurchaseInquiryInvitationEnrollDetails(this.row.id);
                if(code===200){
                    this.tableDataSupplier = data;
                }
            },
            //点击 弹出框物资进行报价
            supplierPrice(row){
                this.tableDataMaterial = [];
                this.quoteAmount = '';
                if(this.row.purchaseGoodsDetail){//物资字符串转数组
                    this.tableDataMaterial = JSON.parse(this.row.purchaseGoodsDetail);
                }
                this.supplierId = row.id;//匹配供应商填写报价以后回显到列表的价格
                this.visible = true;
            },
             //提交报价
             supplierOfferSubmit(){
                const material = this.tableDataMaterial;
                for(var i=0;i<material.length;i++){
                    if(material[i].unitPrice === undefined || material[i].unitPrice === ''){
                        return this.$message.error('检测到物资第'+(i+1)+'行单价未填写！');
                    }
                }
                 //匹配物资到指定供应商
                this.tableDataSupplier.forEach(v=>{
                    if(v.id === this.supplierId){
                        if(v.quoteLabourDetailVOS == undefined){
                            v.quoteDetailVOS = [];
                        }
                        v.quoteLabourDetailVOS = this.tableDataMaterial
                        v.quoteAmount = this.quoteAmount;
                    }
                })
                this.visible = false;
            },
            //供应商合计
            inputTotal(val,row){
                if(!/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(val)){return;}//只能为数字 小数点两位
                row.scoreTotal = '';
                var _num = 0;
                this.tableDataSupplier.forEach(v=>{
                    if(v.id === row.id){
                        _num += parseFloat(v.score1) + parseFloat(v.score2) + parseFloat(v.score3);
                    }
                })
                if((_num+'').indexOf(".") !== -1){
                    let str = _num.toString().split('.');
                    row.scoreTotal = str[1].length === 2 ? _num.toFixed(2) : _num.toFixed(1);
                }else{
                    row.scoreTotal = _num
                }
            },
             //物资合计
             inputPrice(val,row){
                if(!val){
                    row.totalPrice = '';
                    var _num = 0;
                    this.tableDataMaterial.forEach(v=>{
                        if(v.totalPrice !== undefined){
                            _num += parseFloat(v.totalPrice)
                        }
                    })
                    if((_num+'').indexOf(".") !== -1){
                        let str = _num.toString().split('.');
                        _num = str[1].length >= 2 ? _num.toFixed(2) : _num.toFixed(1);
                    }
                    this.quoteAmount =_num;
                    return;
                }
                if(!/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(val)){return;}//只能为数字 小数点两位
                row.totalPrice = val*row.purchasedNum;
                var _num = 0;
                this.tableDataMaterial.forEach(v=>{
                    if(v.totalPrice !== undefined){
                        _num += parseFloat(v.totalPrice)
                    }
                })
                if((_num+'').indexOf(".") !== -1){
                    let str = _num.toString().split('.');
                    console.log(str)
                    _num = str[1].length >= 2 ? _num.toFixed(2) : _num.toFixed(1);
                }
                this.quoteAmount =_num;
            },
            //提交报价
            onFormSubmit(){
                const supplier = this.tableDataSupplier;
                for(var i=0;i<supplier.length;i++){
                    if(supplier[i].score1 === '' || supplier[i].score1 === 0){
                        return this.$message.error('检测到供应商第'+(i+1)+'行履约能力不能为0、不能为空！');
                    }
                    if(supplier[i].score2 === '' || supplier[i].score2 === 0){
                        return this.$message.error('检测到供应商第'+(i+1)+'行价格不能为0、不能为空！');
                    }
                    if(supplier[i].score3 === '' || supplier[i].score3 === 0){
                        return this.$message.error('检测到供应商第'+(i+1)+'行资质不能为0、不能为空！');
                    }
                    if(supplier[i].quoteAmount === '' || supplier[i].quoteAmount === 0){
                        return this.$message.error('检测到供应商第'+(i+1)+'行未填写报价！');
                    }
                }
               
                this.$confirm("确认提交", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                    }).then(async () => {
                        supplier.forEach((v,i)=>{
                            v.score1 = (v.score1*100);
                            v.score2 = (v.score2*100);
                            v.score3 = (v.score3*100);
                            v.quoteAmount = (v.quoteAmount*100);
                            v.scoreTotal = (v.scoreTotal * 100);
                            v.quoteLabourDetailVOS.forEach(b=>{
                                b.totalPrice = (b.totalPrice*100);
                                b.unitPrice = (b.unitPrice*100);
                            })
                        })
                        let params = {};
                        params.id = this.row.id;
                        params.projectType = 2;//1 是物资招标。2是劳务招标
                        params.scoreExplain = this.scoreExplain;//说明
                        params.bidQuoteInfoList = supplier//供应商报价和物资打分
                        let { code } = await bidPurchaseInvitationSupplierEnroll(params);
                        if(code === 200){
                            this.$message.success("操作成功");
                            this.onClose();
                        }
                }).catch(() => {});
            },
            clear(){
                this.scoreExplain="";//评分方法
                this.tableDataSupplier=[];//供应商列表
            },
            //关闭报价
            onClose(){
                this.clear();
                this.$emit('on-cancel-click','review');
            }
        }
    };
    </script>
    
    <style>
        .wally-label:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    </style>